<template>
  <div>
    <h2>{{ titleMsg }}</h2>
    <div
      style="width: 200px; height: 200px; background-color: #2c8dfb"
      @click="handleClick"
    >
      点击
    </div>
  </div>
</template>

<script>
export default {
  name: 'list',
  data() {
    return {
      titleMsg: '测试列表'
    };
  },
  created() {
    console.log('list=created============');
  },
  mounted() {
    console.log('list=mounted============');
  },
  activated() {
    console.log('list=activated============');
  },
  deactivated() {
    console.log('list=deactivated============');
  },
  beforeRouteEnter(to, from, next) {
    console.log('list=beforeRouteEnter==', to, from);
    next();
  },
  beforeRouteUpdate(to, from, next) {
    console.log('list=beforeRouteEnter==', to, from);
    next();
  },
  methods: {
    handleClick() {
      this.$router.push({
        path: '/detail',
        query: {
          id: 1
        }
      });
    }
  }
};
</script>

<style scoped></style>
